<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title>封装多指操作（兼容安卓）</title>
		<style>
			#box{
				margin: 100px auto;
				width: 200px;
				height: 200px;
				background: red;
				color: #fff;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script src="js/m.Tween.js"></script>
		<script>
		document.addEventListener('touchstart', function(e) {
			e.preventDefault();
		});
		window.onload = function(){
			var box = document.querySelector('#box');
			var startRotate = 0;
			var startScale = 0;
			css(box,"translateZ",0.01);
			setGesture({
				el: box,
				start: function(e){
					startRotate = css(this,"rotate");
					startScale = css(this,"scale");
				},
				change:function(e){
					css(this,startRotate + e.rotate);
					css(this,startScale * e.scale);
				}
				
			})
		};
		/*
			init{
				el:element //元素（必填）
				start:fn   //gesturestart要做的操作
				change:fn  //gesturechange要做的操作
				end:fn     //gestureendt要做的操作
			}
			勾股定理：已知直角三角形的两条直角边，求斜边
			touches:指的是当前屏幕上的手指列表
		
		*/
			function getDis(point1,point2){  //双指缩放
				var x = point2.x - point1.x;
				var y = point2.y - point1.y;
				return Math.sqrt(x*x + y*y);
			};
			//Math.atan2(y,x) 斜率 由一条直线与X轴正方向所成角的正切 返回值是弧度
			//角度转弧度 deg*Math.PI/180
			//弧度转角度 rad*180/Math.PI
			function getDeg(point1,point2){  //双指
				var x = point2.x - point1.x;
				var y = point2.y - point1.y;
				return Math.atan2(y,x)*180/Math.PI;
			};
			function setGesture(init){
				var el = init.el;
				var isGestrue = false; 
				var startPoint = [];
				if(!el){
					return;
				}
				el.addEventListener('touchstart',function(e){
					if(e.touches.length >= 2){
						isGestrue = true;//记录当前用户触发了gesture
						startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
						startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
						init.start&&init.start.call(el,e);
						
					}
				});
				el.addEventListener('touchmove',function(e){
					if(isGestrue&&e.touches.length >= 2){
						var nowPoint = [];
						nowPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
						nowPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
						var startDis = getDis(startPoint[0],startPoint[1]);
						var nowDis = getDis(nowPoint[0],nowPoint[1]);
						var startDeg = getDeg(startPoint[0],startPoint[1]);
						var nowDeg = getDeg(nowPoint[0],nowPoint[1]);
						e.scale = nowDis/startDis;
						e.rotate = nowDeg - startDeg;
						init.change&&init.change.call(el,e)
					}
				});
				el.addEventListener("touchend",function(e){
					if(isGestrue){
						if(e.touches.length < 2 || e.targetTouches.length < 1 ){
							isGesture = false;
							init.end&&init.end.call(el,e)
						}
					}
				});
				
			}
		</script>
	</body>
</html>
